<template>
  <div class="echart">
    <div class="enlarge" @click="openDialog">
      <i class="el-icon-full-screen" />
    </div>
    <div ref="echarts1" style="width: 100%; height: 100%"></div>
    <el-dialog
      custom-class="echart-dialog"
      :visible.sync="Dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <el-row type="flex" class="echart-content">
        <el-col :span="24">
          <div class="echart-enlarge" ref="echarts1Large"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "echarts1",
  data() {
    return {
      Dialog: false,
      echarts1: null,
      echarts1Large: null,
      option: {}
    };
  },
  created() {},
  computed: {
    echarts1State() {
      return this.$store.state.echarts1State;
    }
  },
  watch: {
    echarts1State: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          var data = val.data;
          let dqllclArr = []; //当前理论产量
          let dqsjclArr = []; // 当前实际产量
          let zbllclArr = []; //整班理论产量
          let ydata = [];
          data.forEach((item) => {
            dqllclArr.push(item.dqllcl ? parseFloat(item.dqllcl).toFixed(2) : 0);
            dqsjclArr.push(item.dqsjcl ? parseFloat(item.dqsjcl).toFixed(2) : 0);
            zbllclArr.push(item.zbllcl ? parseFloat(item.zbllcl).toFixed(2) : 0);
            ydata.push(item.gongxu);
          });
          this.ydata = ydata;
          this.dqllclArr = dqllclArr;
          this.dqsjclArr = dqsjclArr;
          this.zbllclArr = zbllclArr;
          setTimeout(() => {
            this.$nextTick(() => {
              this.init("echarts1");
              if (this.Dilaog) {
                this.echarts1Large = this.$echarts.init(this.$refs.echarts1Large);
                this.init("echarts1Large");
              }
            });
          }, 500);
        }
      }
    }
  },

  mounted() {
    this.echarts1 = this.$echarts.init(this.$refs.echarts1);
    setTimeout(() => {
      this.echarts1.showLoading({
        color: "#ffffff",
        textColor: "#ffffff",
        maskColor: "rgba(255,255,255,0)"
      });
    }, 0);
  },
  methods: {
    init(dom) {
      let color = dom == "echarts1" ? "#316B84" : "#fff";
      var option = {
        tooltip: {
          trigger: "axis",
          padding: 10,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: dom == "echarts1" ? 12 : 16,
            color: "#fff",
            lineHeight: 25
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            let str = "<span>" + params[0].axisValueLabel + "</span></br>";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                item.color +
                '"></span>' +
                item.seriesName +
                " :<span class='number'> " +
                item.value +
                "</span></br>";
            });

            return str;
          }
        },
        legend: {
          data: ["当前实际产量", "当前理论产量", "整班理论产量"],
          right: 30,
          itemWidth: dom == "echarts1" ? 8 : 16,
          itemHeight: dom == "echarts1" ? 8 : 16,
          itemGap: dom == "echarts1" ? 10 : 20,
          textStyle: {
            fontSize: dom == "echarts1" ? 10 : 16,
            color: color
          }
        },
        color: ["#9A181F", "#fff", "#256CB7"],
        grid: {
          left: "5%",
          right: "10%",
          bottom: dom == "echarts1" ? "18%" : "5%",
          top: "12%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: dom == "echarts1" ? 10 : 16,
              color: color
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        yAxis: {
          type: "category",
          data: this.ydata,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: dom == "echarts1" ? 10 : 16,
              color: color
            }
          }
        },
        series: [
          {
            name: "当前实际产量",
            type: "bar",
            barWidth: dom == "echarts1" ? 5 : 15, //柱图宽度
            data: this.dqsjclArr,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 15, 15, 0]
              }
            }
          },
          {
            name: "当前理论产量",
            type: "bar",
            barWidth: dom == "echarts1" ? 5 : 15, //柱图宽度
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 15, 15, 0]
              }
            },
            data: this.dqllclArr
          },
          {
            name: "整班理论产量",
            type: "bar",
            barWidth: dom == "echarts1" ? 5 : 15, //柱图宽度
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 15, 15, 0]
              }
            },
            data: this.zbllclArr
          }
        ]
      };
      this.option = option;
      this[dom].setOption(option);
      this[dom].hideLoading();
      var _this = this;
      window.addEventListener("resize", function () {
        _this[dom].resize();
      });
    },
    openDialog() {
      this.Dialog = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.echarts1Large = this.$echarts.init(this.$refs.echarts1Large);
          this.init("echarts1Large");
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.enlarge {
}
</style>
